<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="list">

    </ul>

    <script>
        let ul = document.querySelector('.list');
        let count = 100

        // ul.style.display = 'none' // 先隐藏ul
        // for(let i = 0; i < count; i++){
        //     let li = document.createElement('li');
        //     li.innerText = i;
        //     ul.appendChild(li); 
        // }
        // ul.style.display = 'block' // 再显示ul

        // let frg = document.createDocumentFragment(); // 创建文档碎片
        // for(let i = 0; i < count; i++){
        //     let li = document.createElement('li');
        //     li.innerText = i;
        //     frg.appendChild(li);  
        // }
        // ul.appendChild(frg); // 把文档碎片添加到ul中

        let cloneUl = ul.cloneNode(true); // 克隆ul
        for(let i = 0; i < count; i++){
            let li = document.createElement('li');
            li.innerText = i;
            cloneUl.appendChild(li);
        }
        ul.parentNode.replaceChild(cloneUl,ul); // 把克隆的ul添加到ul的父级元素中

    </script>
</body>
</html>